项目工程化的起点
使用 HBuilderX 初始化的 uni-app 项目虽然能直接运行，但在团队协作场景下，缺少代码规范工具会导致代码风格不统一、潜在错误无法及时发现。这节课聚焦于给 uni-start 模板项目接入 ESLint 和 Prettier，配合 TypeScript 类型检查，建立基础的代码质量保障体系。
安装依赖
HBuilderX 创建的项目并非基于 CLI，因此需要手动安装相关依赖。核心思路是：先装 Prettier，再装 ESLint 及其插件。
# 安装 Prettier
pnpm add -D prettier
# 安装 ESLint 核心及插件
pnpm add -D eslint @eslint/js
pnpm add -D eslint-plugin-vue eslint-config-prettier
pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
bash
安装完成后，在项目根目录创建 .eslintrc.js 配置文件，声明 Vue 和 TypeScript 的解析规则。如果项目中已有模板自带的配置文件，可以在此基础上扩展。
VS Code 编辑器适配
由于 HBuilderX 内置了 Vue 3 运行时，dependencies 中不会显式列出 Vue 依赖。这会导致 VS Code 的 ESLint 插件在解析 .vue 文件时报找不到 Vue 模块的错误。
解决方法是手动安装 Vue 的类型声明：
# 安装 Vue（建议与 HBuilderX 内置版本一致，如 3.4.21）
pnpm add vue@3.4.21
# 安装 TypeScript 相关类型声明
pnpm add -D typescript@5.4.0
pnpm add -D vue-tsc @types/node
bash
安装完成后，重启 VS Code 的 ESLint 扩展，即可在 .vue 文件中看到实时的代码检查提示。以 no-side-effects-in-computed-properties 规则为例，在 computed 属性中直接修改响应式数据，ESLint 会给出明确警告。
TypeScript 配置
项目中需要关注两个 TypeScript 配置文件：
tsconfig.json— 根配置env.d.ts— 类型声明文件
HBuilderX 项目不需要 .vue 文件的 shims-vue.d.ts 声明，因为内置编译器已经处理了这些。但如果使用 VS Code 开发，确保 tsconfig.json 的 include 字段覆盖了 .ts、.tsx、.vue、.nvue 等文件类型：
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"]
},
"include": ["**/*.ts", "**/*.tsx", "**/*.vue", "**/*.nvue"],
"exclude": ["node_modules", "unpackage"]
}
json
ESLint 配置文件参考
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
browser: true,
es2022: true
},
globals: {
wx: 'readonly',
uni: 'readonly',
getCurrentPages: 'readonly',
getApp: 'readonly'
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'@typescript-eslint/recommended',
'prettier'
],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaVersion: 'latest'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'vue/no-unused-components': 'warn',
'vue/multi-word-component-names': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }]
}
}
javascript
Git 版本管理初始化
配置完成后，初始化 Git 仓库进行版本管理：
git init
git add .
git commit -m "feat: 初始化uni-start项目，配置ESLint+Prettier+TypeScript"
bash
注意 .gitignore 中需要排除 HBuilderX 生成的 unpackage 目录，该目录包含编译产物，不应纳入版本控制。
在首次提交时，检查是否有测试用的临时文件（如 hello.vue），这些文件应该在提交前删除。
注意事项
- VS Code 版本要求：ESLint 语言客户端要求 VS Code 1.89.0 以上版本，如果低于此版本需要升级
- Vue 版本一致性：手动安装的 Vue 版本应与 HBuilderX 内置版本一致（可在 HBuilderX 的
dependencies中确认具体版本号） - uni-app 全局变量：ESLint 配置中需要声明
uni、wx、getCurrentPages等全局变量，避免未定义警告 - 排除编译产物：
unpackage目录必须加入.gitignore，该目录可能包含数百个文件
↑